<template>
  <div class="scenic-wrapper">

    <!-- <v-header :title="title" :fixed="true" :opacity="headerOpacity">
      <ul class="header-right" slot="right">
        <li class="btn" @click.stop="toggleCollection">
          <i class="icon iconfont" :class="collectionType === 1 ? 'icon-collection-b' : 'icon-collection'" aria-hidden="true" style="font-size: 19px;"></i>
        </li>
        <li class="btn" @click.stop="toShare">
          <i class="icon iconfont icon-share" aria-hidden="true" style="font-size: 17px; padding-top: 3px;"></i>
        </li>
      </ul>
    </v-header> -->

    <template v-if="scenic != null">
      <div class="top">
        <div class="scenic-info">
          <p class="scenic-name">{{scenic.name}}</p>
          <p class="scenic-other">
            <template v-if="scenic.level">
              {{scenic.levelStr}}
              <span class="dot">·</span>
            </template>
            <span class="weather">
              <img :src="weather.weatherIcon" width="20px" height="20px" style="margin-bottom: -4.5px; display: inline-block;"/>
              {{weather.weather}}&emsp;
              {{weather.temperature}}℃
              <template v-if="!scenic.level">
                &emsp;{{weather.windpower}}级风
              </template>
            </span>
          </p>
        </div>
      </div>
      <div  class="entrance">
        <div class="atlas" v-lazy:backgroundImage="atlas[0].src" @click.stop="showAtlas = true">
          <p class="img-num">
            <i class="icon iconfont icon-image"></i>
            {{atlas.length}}
          </p>
        </div>
        <ul>
          <li @click="clickEntrance(0)">
            <i class="icon iconfont icon-scenic-service"></i>
            <p>周边服务</p>
          </li>
          <li @click="clickEntrance(1)">
            <i class="icon iconfont icon-scenic-video"></i>
            <p>景区视频</p>
          </li>
          <li @click="clickEntrance(2)">
            <i class="icon iconfont icon-panorama"></i>
            <p>720全景</p>
          </li>
          <li @click="clickEntrance(3)">
            <i class="icon iconfont icon-draw-map"></i>
            <p>手绘地图</p>
          </li>
        </ul>
      </div>
      <div class="box">
        <p class="title">景区地址</p>
        <div class="address-wrapper">
          <div class="left">
            <p class="address">{{scenic.address}}</p>
            <!-- <p class="distance">{{scenic.distance}}</p> -->
          </div>
          <div class="right" @click="toNativeMap">地图</div>
        </div>
      </div>
      <div class="box">
        <p class="title">景区介绍</p>
        <div class="introduction-wrapper">
          <p style="margin-bottom: 8px"><label style="font-weight: bold;">开放时间：</label>{{scenic.openTime}}</p>
          <p :class="{open: showMoreIntro}">{{scenic.introduction}}</p>
          <div class="down-btn"  @click="showMoreIntro = !showMoreIntro">
            <i class="icon iconfont" :class="showMoreIntro ? 'icon-up' : 'icon-down'"></i>
          </div>
        </div>
      </div>

      <!-- <div class="box">
        <p class="title">门票预定</p>
        <ul class="scenic-ticket" v-if="ticketList.length > 0">
          <li v-for="(ticket, index) in ticketList" :key="ticket.id" @click="toOrderIntro(ticket)" v-show="showMoreTicket || index === 0" :class="{close: !showMoreTicket}">
            <p class="ticket-name">{{ticket.productName}}</p>
            <div class="ticket-bottom">
              <div class="left">
                <p class="ticket-tip">
                  <span>{{ticket.orderTimeStr}}</span>
                  <span class="dot">·</span>
                  <span :class="{error: ticket === 2}">{{ticket.refundTypeStr}}</span>
                  <span class="dot">·</span>
                  <span>{{ticket.payWay === 1 ? '景区支付' : '在线支付'}}</span>
                  <span class="dot">·</span>
                  <span class="tip-btn">预定须知<i class="fa fa-angle-right" aria-hidden="true"></i></span>
                </p>
                <p v-if="ticket.sellPrice != '暂无价格'" class="ticket-price"><span>￥</span>{{ticket.sellPrice}}</p>
                <p v-else style="color: #999; font-size: 18px">暂无价格</p>
              </div>
              <div class="right" @click.stop="toOrder(ticket)">预定</div>
            </div>
          </li>
        </ul>
        <p class="error" v-else>暂时未开放门票~</p>
        <div class="down-btn" v-show="ticketList.length > 1" @click="showMoreTicket = !showMoreTicket">
          <i class="icon iconfont" :class="showMoreTicket ? 'icon-up' : 'icon-down'"></i>
        </div>
      </div> -->

      <div class="box">
        <p class="title">不可错过的景点</p>
        <ul class="more-scenic">
          <router-link v-for="item in moreScenicList" :key="item.id" tag="li" :to="`/scenic/${item.id}`" replace>
            <div v-lazy:backgroundImage="item.thumbUrl" class="bg"></div>
            <p class="name">{{item.name}}</p>
            <p class="intro">{{item.oneSentence}}</p>
          </router-link>
        </ul>
      </div>
      <div class="box">
        <p class="title">推荐游记攻略</p>
        <ul class="strategy-list">
          <li v-for="strategy in strategyList" :key="strategy.id" @click="toPlayStrategy(strategy.id, strategy.articleType)">
            <div class="strategy-thumb" v-lazy:backgroundImage="strategy.firstImg">
              <p class="type">{{strategy.articleType === 1 ? '攻略' : '游记'}}</p>
            </div>
            <div class="right">
              <p class="strategy-title">{{strategy.title}}</p>
              <p class="strategy-intro">{{strategy.intro}}</p>
              <p class="strategy-count">{{strategy.browseCount}}<span>浏览</span></p>
            </div>
          </li>
        </ul>
      </div>

      <div class="box" v-if="hotelList !== null && hotelList.length !== 0">
        <p class="title">推荐酒店</p>
        <ul class="hotel-list" slot="content">
          <router-link v-for="item in hotelList" :key="item.id" :to="`/hotel/${item.id}`" tag="li">
            <div v-lazy:backgroundImage="item.thumbnailId" class="bg"></div>
            <p class="name">{{item.name}}</p>
            <p class="price">￥<span style="font-size: 15px; margin-right: 4px;">{{item.floorPrice}}</span></p>
          </router-link>
        </ul>
      </div>

      <div class="box">
        <p class="title">附近美食</p>
        <ul class="hotel-list" slot="content">
          <router-link v-for="item in foodList" :key="item.id" :to="`/foodDetailsOne/${item.id}?recommend=0`" tag="li">
            <div v-lazy:backgroundImage="item.thumbUrl" class="bg"></div>
            <p class="name">{{item.name}}</p>
            <p class="price">￥<span style="font-size: 15px; margin-right: 4px;">{{item.consumptionPerPerson}}</span></p>
          </router-link>
        </ul>
      </div>
      
      <div v-if="scenic != null && commentTotal > 0" class="box">
        <p @click="toCommentList()" class="title">来自{{commentTotal}}位游客点评<span class="more"><label style="color: #ff9c00; font-size: 20px; font-weight: normal;">{{scenic.rate}}<span style="font-size: 12px;">分</span></label><i class="fa fa-angle-right" aria-hidden="true"></i></span></p>
        <div class="comment-wrapper" v-if="commentList.length > 0" @click="toCommentList(commentList[0].id)">
          <div class="user-info">
            <img class="head-url" v-lazy="commentList[0].headUrl"/>
            <div>
              <p class="nickname">{{commentList[0].nickname}}</p>
              <rater v-model="commentList[0].rate" star="<i class='icon iconfont icon-scenic-star'/>" active-color="#ff7e00" :margin="2" :disabled="true" :font-size="12"></rater>
            </div>
          </div>
          <p class="comment-content">
            {{commentList[0].comment}}
          </p>
          <ul class="comment-atlas" v-if="commentList[0].matchImgUrl.length > 0">
            <li v-for="(img, index) in commentList[0].matchImgUrl" :key="index" v-lazy:backgroundImage="img" v-if="index < 3"></li>
          </ul>
        </div>
      </div>

      <!-- <p v-else class="box" style="color: #999;">该景区暂无评论</p> -->

    </template>
    <load-fail v-if="loadFail"></load-fail>

    <!-- 图集 -->
    <div v-transfer-dom>
      <previewer :list="atlas" :options="{loop: false}" ref="previewer"></previewer>
    </div>
    <div v-transfer-dom>
      <popup v-model="showAtlas" position="bottom" width="100%" height="100%" class="popup-wrapper">
        <div class="home-atlas" style="overflow: hidden;">
          <v-header title="图集" :handleClick="true" @back="showAtlas = false">
          </v-header>
          <div :style="{height: atlasScrollHeight + 'px'}" style="margin: 3.5px; overflow-x: hidden; overflow-y: scroll;" v-if="showAtlas && atlas.length > 0">
            <waterfall :calHeight="true" :gap="7" :imgsArr="atlas" :customWidth="itemWidth" @clickItem="previewAtlas" loadingTip="正在加载景区图集...">
            </waterfall>
          </div>
        </div>
      </popup>
    </div>

    <actionsheet v-model="showMap" :menus="menusMap" :show-cancel="true" @on-click-menu="clickMapMenu"></actionsheet>

    <share
      v-model="showShare"
      :title="shareObj.productName"
      :desc="shareObj.productDesc"
      :thumbUrl="shareObj.thumbUrl"
      :linkUrl="shareObj.linkUrl">
    </share>

    <!-- 预定须知 -->
    <div v-transfer-dom>
      <popup v-model="showOrderIntro" position="bottom" width="100%"  class="popup-wrapper">
        <div class="order-intro" style="overflow: hidden;"  v-if="selectedTicket">
          <div class="order-header">
            <p>{{selectedTicket.productName}}</p>
            <div class="btn" @click="showOrderIntro = false">
              <i class="icon iconfont icon-close-circle"></i>
            </div>
          </div>
          <div class="content">
            <p class="order-title">预定说明</p>
            <ul class="order-desc">
              <li>
                <label>预定时间：</label>
                <div>
                  <p class="important" style="margin-bottom: 4px;">{{selectedTicket.orderTimeStr}}</p>
                  <p>{{selectedTicket.orderTimeTip}}</p>
                </div>
              </li>
              <li>
                <label>有 效 期：</label>
                <p>{{selectedTicket.limitUseTimeRangeStr}}</p>
              </li>
              <li>
                <label>限购政策：</label>
                <p  style="padding-top: 0.5px">每笔订单最多购买99份</p>
              </li>
            </ul>
            <div v-if="selectedTicket.feeDescription && selectedTicket.feeDescription !== ''" style="margin-bottom: 32px">
              <p class="order-title">费用说明</p>
              <p class="desc">{{selectedTicket.feeDescription}}</p>
            </div>
            <p class="order-title">退款说明</p>
            <ul class="order-desc">
              <li>
                <label>退款时间：</label>
                <div>
                  <p class="important" style="margin-bottom: 4px;">{{selectedTicket.refundTypeStr}}</p>
                  <p>{{selectedTicket.refundTypeTip}}</p>
                </div>
              </li>
              <li >
                <label>是否支持部分退款：</label>
                <p>{{selectedTicket.supportPartRefund === 1 ? '是' : '否'}}</p>
              </li>
              <li >
                <label>退款手续费：</label>
                <p>{{selectedTicket.refundPoundageStr}}</p>
              </li>
            </ul>
            <p class="order-title">入园须知</p>
            <ul class="intro">
              <li>
                <p style="margin-bottom: 8px"><label>入园方式：</label><span class="important">在景区门闸机刷二维码即可进</span></p>
                <p>凭商家确认短信、身份证、手机号、姓名在凭确认短信直接验证直接验证入园</p>
              </li>
              <li>
                <p style="margin-bottom: 8px"><label>景区开放时间</label></p>
                <p>{{scenic.openTime}}</p>
              </li>
            </ul>
            <div v-if="selectedTicket.useDescription && selectedTicket.useDescription !== ''" style="margin-bottom: 32px">
              <p class="order-title">使用说明</p>
              <p class="desc">{{selectedTicket.useDescription}}</p>
            </div>
          </div>
          <div class="bottom" :style="{marginBottom: paddingBottom + 'px'}">
            <div class="left">
              <p v-if="selectedTicket.sellPrice && selectedTicket.sellPrice != '暂无价格'">{{selectedTicket.payWay === 1 ? '景区支付' : '在线支付'}} <span style="font-size: 13px; margin-left: 4px;">￥</span><span style="font-size: 21px">{{selectedTicket.sellPrice}}</span></p>
              <p v-else style="color: #999; font-size: 18px">暂无价格</p>
            </div>
            <div class="right" @click.stop="toOrder(selectedTicket)">立即预定</div>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import LoadFail from '@/components/load-fail/load-fail'
import { TransferDom, Actionsheet, Popup, Rater } from 'vux'
import Waterfall from '@/components/waterfall/waterfall'
import Previewer from '@/components/previewer/previewer'
import Share from '@/components/share/share'

import { isIphoneX, isIOS, isAndroid } from '@/assets/js/brower'
import axios from '@/api/axiosApi'
import getWeather from '@/api/getWeather'
import weatherData from '@/assets/json/weatherData.json'
import { mapGetters } from 'vuex'
import { on } from '@/assets/js/dom'
import { localUser } from '@/assets/js/local'
import { QINIU_PREFIX, APP_DOWNLOAD_PATH } from '@/api/config'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { handleBackMixin } from '@/assets/js/mixin'

const SCROLL_HEIGHT = 160
export default {
  mixins: [handleBackMixin],
  data () {
    return {
      title: '',
      loadFail: false,
      showMoreIntro: false,
      showMoreTicket: false,
      showMap: false,
      showAtlas: false,
      showShare: false,
      showOrderIntro: false,
      shareObj: {},
      headerOpacity: 0,
      scenic: null,
      scenicVideo: null,
      collectionType: 0,
      menusMap: {},
      weather: {
        weather: '多云',
        temperature: 12
      },
      atlas: [],
      selectedTicket: null,
      ticketList: [],
      moreScenicList: [],
      strategyList: [],
      hotelList: [],
      foodList: [],
      commentTotal: 0,
      commentList: [],
      allDisabledBack: true,
      allPopupModels: ['showShare', 'showAtlas', 'showMap', 'showOrderIntro']
    }
  },
  beforeRouteUpdate(to, from, next) {
    next()
    this._getScenicInfo()
    // 手动滚动置顶。instant 有BUG，会事件穿透
    this.$el.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
    // 初始化参数
    this.headerOpacity = 0
    this.showMap = false
    this.showAtlas = false
  },
  directives: {
    TransferDom
  },
  components: {
    LoadFail, VHeader, Actionsheet, Waterfall, Previewer, Popup, Share, Rater
  },
  computed: {
    ...mapGetters(['position', 'areaList'])
  },
  created() {
    this.paddingTop = 24
    this.paddingBottom = 0
    this.atlasScrollHeight = window.innerHeight - (40 + 24)
    if (isIphoneX()) {
      this.paddingTop = 34
      this.paddingBottom = 34
      this.atlasScrollHeight = window.innerHeight - (40 + 34)
    }
    this.itemWidth = (window.innerWidth - 21) / 2

    this._getScenicInfo()
  },
  mounted() {
    on(this.$el, 'scroll', (e) => {
      if (e.target.scrollTop <= SCROLL_HEIGHT) {
        this.headerOpacity = e.target.scrollTop / SCROLL_HEIGHT
        this.title = ''
      } else {
        this.headerOpacity = 1
        this.title = this.scenic.name
      }
    })
  },
  methods: {
    _getScenicInfo() {
      axios.get(this, '/v1/scenic', {
        id: this.$route.params.id
      }, (data) => {
        if (data == null || data.length === 0) {
          this.loadFail = true
          this.headerOpacity = 1
          return
        }
        this.loadFail = false
        data[0].level && (data[0].level = parseInt(data[0].level))
        let levelStr = ''
        switch (data[0].level) {
          case 1:
            levelStr = 'A级景区'
            break
          case 2:
            levelStr = 'AA级景区'
            break
          case 3:
            levelStr = 'AAA级景区'
            break
          case 4:
            levelStr = 'AAAA级景区'
            break
          case 5:
            levelStr = 'AAAAA级景区'
            break
        }
        data[0].levelStr = levelStr

        const atlasTmp = []
        data[0].atlas.split(';').forEach(img => {
          atlasTmp.push({
            src: img
          })
        })
        this.atlas = atlasTmp
        this.scenic = data[0]
        // 获取相关数据
        this._viewScenic()
        this._getScenicProductList(data[0].fromId)
        this._getStrategyList()
        this._getMoreScenicList()
        this._getHotelList()
        this._getFoodList()
        this._getCommentList()
        this._getCollectionStatus()
        // 获取天气数据
        const city = this.areaList.find(o => this.scenic.areaId === o.id)
        getWeather(city.name, (params) => {
          const icon = weatherData.find(o => o.name === params.weather)
          if (icon) {
            params.weatherIcon = icon.src
          } else {
            params.weatherData = '/static/img/weather/no_weather.png'
          }
          this.weather = params
        })
      }, () => {
        this.loadFail = true
        this.headerOpacity = 1
      })
    },
    _getScenicProductList(id) {
      axios.get(this, '/v1/scenicProduct', {
        scenicIds: id
      }, (data) => {
        data.forEach(item => {
          // 可退时间
          switch (item.refundType) {
            case 0:
              item.refundTypeStr = '随时可退'
              break
            case 1:
              item.refundTypeStr = '指定时间内可退'
              if (item.timeLimitRefundType === 0) {
                item.refundTypeTip = '在使用日期开始前可以申请退款'
              } else if (item.timeLimitRefundType === 1) {
                item.refundTypeTip = '在使用日期截止前' + item.refundAdvanceDay + '天的' + item.refundAdvanceTime + '可以申请退款'
              } else if (item.timeLimitRefundType === 2) {
                item.refundTypeTip = '在使用日期截止后' + item.refundAdvanceDay + '天的' + item.refundAdvanceTime + '可以申请退款'
              }
              break
            case 2:
              item.refundTypeStr = '不可退'
              break
          }
          // 处理价格
          item.sellPrice = '暂无价格'
          this._getProductPrice(item.id)
          // 预定时间
          if (item.limitEnterType === 1) {
            item.orderTimeStr = this.moment().isBefore(this.moment(item.advanceTime)) ? '今日可定' : (item.advanceDay === 1 ? '明日可定' : item.advanceDay + '天后可定')
            item.orderTimeTip = '需要在游玩' + (item.advanceDay === 1 ? '当天' : item.advanceDay + '后') + '的' + item.advanceTime + '前预定'
          } else if (item.limitEnterType === 2) {
            item.orderTimeStr = '今日可定'
            item.orderTimeTip = '预订后' + item.enterAfterBookHour + '小时后才能入园'
          } else {
            item.orderTimeStr = '随时可定'
          }
          // 有效期
          if (item.limitUseTimeRange) {
            if (item.useTimeRangeStart && item.useTimeRangeStart !== '') {
              item.limitUseTimeRangeStr = '游玩日期当天的' + item.useTimeRangeStart + '到' + item.useTimeRangeEnd + '有效'
            } else {
              item.limitUseTimeRangeStr = '游玩日期当天有效'
            }
          } else {
            item.limitUseTimeRangeStr = '不限制'
          }
          // 手续费
          item.refundPoundageStr = (item.refundPoundageType === 1 ? '按张数，每张' : '按订单，每单') + item.refundPoundage + '元'
        })
        this.ticketList = data
      })
    },
    _getProductPrice(ticketId) {
      axios.get(this, '/v2/scenicPrice', {
        productId: ticketId
      }, (data) => {
        if (data && data.length > 0) {
          for (let i = 0; i < this.ticketList.length; i++) {
            if (this.ticketList[i].id === ticketId) {
              this.ticketList[i].sellPrice = data[0].sellPrice
              return
            }
          }
        }
      })
    },
    _getMoreScenicList() {
      axios.get(this, '/v1/recommendScenic', {
        scenicId: this.scenic.id,
        pageSize: 3
      }, data => {
        this.moreScenicList = data
      })
    },
    _getStrategyList() {
      axios.get(this, '/v1/recommendPlayStrategy', {
        pageSize: 2,
        pageNum: 1,
        areaId: this.scenic.areaId
      }, (data) => {
        this.strategyList = data
      })
    },
    _getHotelList() {
      axios.get(this, '/v1/recommendHotel', {
        pageSize: 3,
        areaId: this.scenic.areaId
      }, (data) => {
        this.hotelList = data
      })
    },
    _getFoodList() {
      axios.get(this, '/v1/nearbyStoreFood', {
        storeNum: 3,
        longitude: this.scenic.longitude,
        latitude: this.scenic.latitude,
        distance: 30000
      }, (data) => {
        this.foodList = data
      })
    },
    _viewScenic() {
      const userId = localUser.get('id')
      if (userId != null) {
        axios.post(this, '/v1/messageRecord', {
          userId: userId,
          targetId: this.scenic.id,
          type: 4
        }, null, null, false)
      }
    },
    _getCollectionStatus() {
      const userId = localUser.get('id')
      if (userId) {
        axios.get(this, '/v1/messageRecord/' + localUser.get('id') + '/' + this.scenic.id, null, (data) => {
          if (data) {
            this.collectionType = data.collectionType
          }
        }, null, false)
      }
    },
    _getCommentList() {
      axios.get(this, `/v1/productComment/${this.scenic.id}`, {
        pageSize: 1
      }, (data, total) => {
        data.forEach(item => {
          if (item.headUrl) {
            if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
              item.headUrl += '-bheader'
            }
          } else {
            item.headUrl = defaultAvatar
          }
          if (item.matchImgUrl) {
            item.matchImgUrl = item.matchImgUrl.split(';')
          }
        })
        this.commentTotal = total
        this.commentList = data
      })
    },
    toggleCollection () {
      // 切换收藏状态
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录！', 'middle')
        setTimeout(() => {
          this.$router.push('/login')
        }, 200)
        return
      }
      if (this.scenic == null) {
        return
      }
      if (this.collectionType === 0) {
        this.collectionType = 1
      } else {
        this.collectionType = 0
      }
      axios.put(this, '/v1/messageRecord', {
        userId: localUser.get('id'),
        targetId: this.scenic.id,
        collectionType: this.collectionType,
        type: 4
      }, (res) => {
        if (this.collectionType === 0) {
          this.$vux.toast.text('取消收藏！')
        } else {
          this.$vux.toast.text('收藏成功！')
        }
      })
    },
    clickEntrance(type) {
      if (this.scenic == null) {
        return
      }
      switch (type) {
        case 0:
          // 周边服务
          this.$router.push(`/serviceMap/${this.scenic.id}/0`)
          break
        case 1:
          // 景区视频
          this.$router.push(`/scenicVideoSet/${this.scenic.id}`)
          break
        case 2:
          // 720全景
          if (this.scenic.panorama) {
            if (isIOS()) {
              window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'showVRPanorama', 'panoramaUrl': this.scenic.panorama})
            } else {
              window.android.showVRPanorama(this.scenic.panorama)
            }
          } else {
            this.$vux.toast.text('暂无720全景~', 'middle')
          }
          break
        case 3:
          // 手绘地图
          if (this.scenic.mapNavigation) {
            this.$router.push({
              path: '/iframe',
              query: {
                address: this.scenic.name,
                src: this.scenic.mapNavigation
              }
            })
          } else {
            this.$vux.toast.text('暂无手绘地图~', 'middle')
          }
          break
      }
    },
    toNativeMap () {
      if (isIOS()) {
        // 页面跳转至导航路线
        window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapNavi', 'latitude': this.scenic.latitude, 'longitude': this.scenic.longitude})
      } else if (isAndroid()) {
        this.menusMap = JSON.parse(window.android.isInstallByread())
        if (this.menusMap == null || Object.getOwnPropertyNames(this.menusMap).length === 1) {
          this.showCancel = false
          this.showGaoDei = true
          return
        }
        if (this.menusMap.baiDu === '2') {
          this.menusMap.baiDu = '百度地图'
        }
        if (this.menusMap.gaoDei === '1') {
          this.menusMap.gaoDei = '高德地图'
        }
        if (this.menusMap.tenXun === '3') {
          this.menusMap.tenXun = '腾讯地图'
        }
        this.showMap = true
      }
    },
    clickMapMenu (value) {
      if (isAndroid()) {
        if (value === 'baiDu') {
          window.android.makeUpMap(this.scenic.latitude, this.scenic.longitude, '', 2, 1, '')
        } else if (value === 'gaoDei') {
          window.android.makeUpMap(this.scenic.latitude, this.scenic.longitude, '', 1, 1, '')
        } else if (value === 'tenXun') {
          window.android.makeUpMap(this.scenic.latitude, this.scenic.longitude, '', 3, 1, '')
        }
      }
    },
    previewAtlas(item, index) {
      // 预览图片
      this.$refs.previewer.show(index)
    },
    toShare() {
      if (this.scenic == null) {
        return
      }
      this.showShare = true
      this.shareObj = {
        title: this.scenic.name,
        desc: this.scenic.introduction,
        thumbUrl: this.atlas[0].src,
        linkUrl: APP_DOWNLOAD_PATH
      }
    },
    toOrderIntro(ticket) {
      this.selectedTicket = ticket
      this.showOrderIntro = true
    },
    toCommentList(commentId) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        return
      }
      this.$router.push({
        path: `/commentList/${this.scenic.id}/0`,
        query: {
          commentId: commentId
        }
      })
    },
    toPlayStrategy(id, type) {
      type === 1 ? this.$router.push('/address/strategy/' + id) : this.$router.push('/address/travels/' + id)
    },
    toOrder(ticket) {
      this.$store.commit('SET_SELECTED_SCENIC', {
        scenic: this.scenic,
        ticket: ticket
      })
      this.$router.push('/scenicOrder')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.box
  background #ffffff
  margin-top 16px
  padding 20px 16px
.title
  color #333
  padding-bottom 20px
  line-height 1
  font-size 20px
  font-weight bold
  .more
    float right
  i
    font-size 24px
    color #999
    margin-left 8px
.error
  color red
.down-btn
  text-align center
  margin-top 16px
  font-size 16px
  color #666
.scenic-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
.header-right
  display flex
  align-items center
  .btn
    extend-click()
    i
      font-size 18px
      color #fff
  li
    margin-left 20px
.top
  position relative
  overflow-y auto
  width 100vw
  height 75vw
  background-image url(../../../../assets/img/scenic-head-bg.jpg)
  .scenic-info
    margin-top calc(75vw / 2 - 31px)
    text-align center
    color #ffffff
    line-height 1
    .scenic-name
      font-size 28px
      margin-bottom 16px
    .scenic-other
      font-size 13px
    .dot
      margin 0 12px
.entrance
  background #ffffff
  padding-bottom 28px
  .atlas
    border-radius 5px
    background-size cover
    background-position center
    background-repeat no-repeat
    margin 0 16px
    margin-top calc(59px - 75vw / 2)
    height 164px
    box-shadow 0 2px 10px #b6b6b6
    position relative
    .img-num
      position absolute
      right 12px
      bottom 12px
      line-height 1
      color #ffffff
      font-size 12px
      i
        margin-right 4px
  ul
    line-height 1
    display flex
    justify-content space-around
    margin-top 28px
    li
      width 25%
      text-align center
    i
      color #333
      font-size 30px
    p
      color #666
      font-size 12px
      margin-top 8px
.address-wrapper
  display flex
  justify-content space-between
  align-items center
  .left
    width calc(100% - 80px)
    line-height 1
    .address
      font-size 16px
      color #333333
      margin-bottom 8px
      no-wrap()
    .distance
      font-size 13px
      color #666666
  .right
    width 64px
    height 30px
    border-radius 3px
    background-color $color-theme
    color #fff
    text-align center
    line-height 30px
.introduction-wrapper
  p
    color #666666
    font-size 15
    no-wrap-n(4)
  .open
    display block
    overflow auto
.scenic-ticket
  li
    padding 16px 0
    border-bottom 0.5px solid #e2e2e2
    &:first-child
      padding-top 0
    &:last-child
      padding-bottom 0
      border-bottom none
  .close
    padding 0
    border-bottom none
  .ticket-name
    color #333
    font-size 15px
    line-height 1.3
  .ticket-bottom
    display flex
    justify-content space-between
    align-items center
    .left
      width calc(100% - 80px)
      line-height 1
      margin-top 12px
      .ticket-tip
        font-size 12px
        color #999
        margin-bottom 12px
        .dot
          margin 0 2px
        .tip-btn
          color #333
        i
          font-size 14px
          margin-left 4px
      .ticket-price
        font-size 20px
        color $color-theme
        span
          font-size 12px
          margin-right 4px
    .right
      width 64px
      height 30px
      border-radius 3px
      background-color $color-theme
      color #fff
      text-align center
      line-height 30px
.more-scenic
  display flex
  width 100%
  justify-content space-between
  li
    line-height 1
    margin-right 8px
    width calc((100vw - 48px) / 3)
    .bg
      width calc((100vw - 48px) / 3)
      height 82px
      border-radius 3px
      background-size cover
      background-position center
      background-repeat no-repeat
      box-shadow 0 0 8px #d0d0d0
    .name
      font-size 15px
      color #333
      margin-top 12px
      margin-bottom 8px
      no-wrap()
    .intro
      font-size 12px
      color #999
      no-wrap()
    &:last-child
      margin-right 0
.strategy-list
  li
    display flex
    justify-content space-between
    align-items center
    padding 16px 0
    border-bottom 1px solid #e2e2e2
    .right
      width calc(100% - 137px)
    .strategy-thumb
      width 125px
      height 94px
      border-radius 3px
      background-size cover
      background-position center
      background-repeat no-repeat
      position relative
      .type
        position absolute
        bottom 8px
        left 8px
        color #fff
        font-size 13px
        height 21px
        line-height 21px
        padding 0 8px
        border-radius 21px
        background rgba(0, 0, 0, 0.45)
    .strategy-title
      font-size 15px
      color #333
      line-height 1.3
      margin-bottom 10px
      no-wrap()
    .strategy-intro
      font-size 12px
      color #999
      line-height 1.3
      margin-bottom 8px
      no-wrap-n(2)
    .strategy-count
      font-size 12px
      color #333
      float right
      span
        color #999
        margin-left 4px
    &:last-child
      border-bottom none
      padding-bottom 0
    &:first-child
      padding-top 0
.hotel-list
  display flex
  width 100%
  justify-content space-between
  li
    line-height 1
    margin-right 8px
    width calc((100vw - 48px) / 3)
    .bg
      width calc((100vw - 48px) / 3)
      height 82px
      border-radius 3px
      background-size cover
      background-position center
      background-repeat no-repeat
      box-shadow 0 0 8px #d0d0d0
    .name
      font-size 15px
      color #333
      margin-top 12px
      margin-bottom 8px
      no-wrap()
    .price
      font-size 12px
      color $color-theme
    &:last-child
      margin-right 0
.order-intro
  background #fff
  .order-header
    padding 20px 16px
    font-size 18px
    font-weight 600
    line-height 1.3
    display flex
    justify-content space-between
    box-shadow 0 0 12px #cdcdcd
    .btn
      width 50px
      text-align right
      i
        font-size 18px
        font-weight bold
        color #999
    p
      width calc(100% - 80px)
  .content
    padding 12px 16px
    height 330px
    overflow-x hidden
    overflow-y auto
    font-size 14px
    color #999
    -webkit-overflow-scrolling touch
    -webkit-box-sizing border-box
    label
      color #000
      margin-right 4px
    .important
      background $color-theme
      padding 0 8px
      width fit-content
      color #fff
      font-size 13px
      height 20px
      line-height 20px
      border-radius 2px
      display inline-block
    .order-title
      font-size 18px
      border-left 3px solid $color-theme
      line-height 1.1
      padding-left 6px
      color #333
      margin-bottom 16px
      margin-top 8px
    .order-desc
      margin-bottom 32px
      li
        display flex
        margin-bottom 12px
        line-height 1.3
    .intro
      margin-bottom 32px
      li
        margin-bottom 12px
        line-height 1.3
  .bottom
    display flex
    box-shadow 0 0 7px #cdcdcd
    .left
      width 58vw
      height 50px
      line-height 50px
      padding-left 16px
      span
        color $color-theme
    .right
      width 42vw
      height 50px
      line-height 50px
      background $color-theme
      font-size 18px
      color #fff
      text-align center
.comment-wrapper
  .user-info
    display flex
    align-items center
    margin-bottom 10px
    line-height 1
    .head-url
      min-width 40px
      height 40px
      margin-right 8px
      border-radius 50%
    .nickname
      font-size 12px
      color #333
  .comment-content
    font-size 15px
    color #333
    line-height 1.3
    padding-left 48px
  .comment-atlas
    margin-top 12px
    display flex
    padding-left 48px
    li
      background-size cover
      background-repeat no-repeat
      background-position center
      width calc((100% - 16px) / 3)
      height 60px
      margin-right 8px
      border-radius 3px
      &:last-child
        margin-right 0
.comment-btn
  height 49px
  line-height 49px
  color #333
  font-size 17px
  border-top 1px solid #e2e2e2
  background #ffffff
  margin-top 16px
  text-align center
  i
    margin-right 12px
</style>
